<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
    <link href="{{ url_for('static', filename='js/wangeditor/style.css') }}" rel="stylesheet" />
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            margin: 10px 0;
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 300px;
        }
    </style>
</head>

<body>
    <h2>修改文章</h2>
    <form method="post" class="box">
        <p>
            <span>标题：</span>
            <input style="height: 28px" name="title" value="{{ post.title }}" />
            <select name="category_id">
                {% for cat in categories %}
                    {% if cat.id == post.category_id %}
                        <option value="{{ cat.id }}" selected>{{ cat.name }}</option>
                    {% else %}
                        <option value="{{ cat.id }}">{{ cat.name }}</option>
                    {% endif %}
                {% endfor %}
            </select><br> 标签（用空格分隔）：
            <input name="tags" value="{{ post.tags | map(attribute='name') | join(' ') }}"><br>
            <input type="hidden" name="content" id="content" value="{{ post.content }}">
        </p>
        <div>
        <label>状态：</label>
        <select name="status">
            <option value="draft" {% if post.status == 'draft' %}selected{% endif %}>草稿</option>
            <option value="published" {% if post.status == 'published' %}selected{% endif %}>已发布</option>
        </select>
        </div>
        
        <p>内容：</p>

        <div id="editor—wrapper">
            <div id="toolbar-container">
                <!-- 工具栏 -->
            </div>
            <div id="editor-container">
                <!-- 编辑器 -->
            </div>
        </div>
        <p><button>修改</button></p>
    </form>
    <p><a href="/admin" class="back">← 返回</a></p>
    <script src="{{ url_for('static', filename='js/wangeditor/index.js') }}"></script>
    <script>
        const { createEditor, createToolbar } = window.wangEditor;

        const editor = createEditor({
            selector: "#editor-container",
            html: `{{ post.content | safe if post else '' }}`,
            config: {
                placeholder: "Type here...",
                onChange(editor) {
                    const html = editor.getHtml();
                    console.log("editor content", html);

                    document.querySelector('#content').value = html;
                },
            },
            // mode: "default",
        });

        const toolbar = createToolbar({
            editor,
            selector: "#toolbar-container",
            config: {},
            mode: "default",
        });
    </script>
</body>

</html>